﻿<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>

    <script src="JS/jquery-1.3.2.min.js" type="text/javascript"></script>
    
    
    <style type="text/css">
        #Desk
        {
            position:absolute;
            left:10px;
            right:10px;
            top:10px;
            bottom:10px;
            border:solid 2px red;
        }
        .menu
        {
            position:absolute;
            margin:10px 10px;
            border:solid 2px blue;
            width:100px;
            height:100px;
            cursor:hand;
        }
        
        
        div
        {
             -moz-user-select:none;
        }
    
    </style>
    
    <script type="text/javascript">

        var arMenu = new Array();
        var startX = 0
        var startY = 0;

        var MenuX = 0
        var MenuY = 0;
        var Columns = 8;
        var TotalNum = 16;
        var currMenu = null;

        $(function() {
        document.body.onselectstart = function() { return false; }
        
            for (var i = 0; i < 16; i++) {
                var menu = new Object();
                menu.MenuId = i;
                menu.Icon = "Images/"+i +".png";
                menu.Name = "标题A" + i;
                arMenu[i] = menu;
            }

            document.getElementById("Desk").onmousemove = menu_move;
            document.getElementById("Desk").onmouseup = menu_up;


            draw();





        })


        function draw() {
            $("#Desk").html("");

            for (var i = 0; i < TotalNum; i++) {
                if (arMenu[i] == undefined || arMenu[i] == null) {
                    return;
                }
                var row = Math.floor((i / Columns)) + 1;
                var columns = Math.floor((i % Columns)) + 1;

                var divMenu = document.createElement("div");
                divMenu.id = "divMenu" + arMenu[i].MenuId;
                divMenu.className = "menu";
                divMenu.style.left = (columns * 150) + "px";
                divMenu.style.top = (row * 150) + "px";

                divMenu.onmousedown = menu_down;


                var img = document.createElement("img");
                img.src = arMenu[i].Icon;
                divMenu.appendChild(img);

                var lb = document.createElement("label");
                lb.innerText = arMenu[i].Name;
                divMenu.appendChild(lb);


                document.getElementById("Desk").appendChild(divMenu);



                $("#Desk->div").mouseover(function() {
                    $(this).css({ "opacity": "0.25" });
                });
                $("#Desk->div").mouseout(function() {
                    $(this).css({ "opacity": "0" });
                });
            }
        }


        function menu_down() {
            startX = window.event.clientX
            startY = window.event.clientY;

            MenuX = this.offsetLeft;
            MenuY = this.offsetTop;

            currMenu = this;
        }
        function menu_up() {
            currMenu = null;

            sort();
            draw();
        }
        function menu_move() {
            if (currMenu == null)
                return;
            var valueX = (window.event.clientX - startX);
            var valueY = (window.event.clientY - startY);
            currMenu.style.left = MenuX + valueX;
            currMenu.style.top = MenuY + valueY;
        
        }


        function sort() {
            var msg = "";
            for (var k = 0; k < arMenu.length; k++) {
                for (var i = 0; i < arMenu.length - 1 -k  ; i++) {
                    var divMenu1 = document.getElementById("divMenu" + arMenu[i].MenuId);
                    var divMenu2 = document.getElementById("divMenu" + arMenu[i + 1].MenuId);
                    if (divMenu2 == null)
                        continue;
                    var column1 = divMenu1.offsetLeft;
                    var row1 = Math.floor(divMenu1.offsetTop / 150);

                    var column2 = divMenu2.offsetLeft;
                    var row2 = Math.floor(divMenu2.offsetTop / 150);
                    //$(divMenu1).find("label")[0].innerText = row1 + "*" + column1;

                    if (row1 > row2 || (row1 == row2 && column1 > column2)) {
                        msg += arMenu[i].Name + " -> " + arMenu[i + 1].Name +" , ";
                        var t = new Object();
                        copyValue(arMenu[i], t);
                        copyValue(arMenu[i + 1], arMenu[i]);
                        copyValue(t, arMenu[i+1]);
                    }
                }
            }
            //alert(msg);
            //debugger;
        }

        function copyValue(obj1, obj2) {
            obj2.MenuId = obj1.MenuId;
            obj2.Icon = obj1.Icon;
            obj2.Name = obj1.Name;
        }
        
        function sort2() {

            for (var k = 0; k < arMenu.length; k++) {
                for (var i = 0; i < arMenu.length - 1 - k; i++) {
                    var divMenu1 = document.getElementById("divMenu" + i);
                    var divMenu2 = document.getElementById("divMenu" + (i + 1));
                    if (divMenu2 == null)
                        continue;
                    var column1 = divMenu1.offsetLeft;
                    var row1 = Math.floor(divMenu1.offsetTop / 150);

                    var column2 = divMenu2.offsetLeft;
                    var row2 = Math.floor(divMenu2.offsetTop / 150);
                    $(divMenu1).find("label")[0].innerText = row1 + "*" + column1;

//                    if (row1 > row2 || (row1 == row2 && column1 > column2)) {
//                        var t = arMenu[i];
//                        arMenu[i] = arMenu[i + 1];
//                        arMenu[i + 1] = t;
//                    }
                }
            }
        }
        function btn_click() {
            sort2();
        }
    
    
    </script>
    
    
    
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type="button" onclick="btn_click()" value="sort" />
    <div id="Desk">

    </div>
    </div>
    </form>
</body>
</html>
